<template>
  <div class="page-content">
    <div class="company-card bg-white" style="margin-bottom:20px;">
      <div class="box-title">企业入驻</div>
      <div class="company-content">
        <div>1、企业证件信息仅用于实名认证，不会泄露您的企业证件信息；</div>
        <div>2、请准备好营业执照电子版、法人身份信息。</div>
      </div>
    </div>
    <div class="company-card bg-white bg" @click="openVerifyDialog()" v-if="verifyStatus==='once'">
      <div class="box-title">企业入驻</div>
      <div class="company-content">
        <span class="iconfont icontubiao2-95" style="font-size: 24px;"></span>
        <div>
          适用企业、政府、事业单位、学校、组织等，账号归属于企业
        </div>
      </div>
    </div>
    <SubmitVerify v-if="isVerify || verifyStatus === 'success'" :verifyInfo="verifyInfo" @submitSuccess="isVerify=false;verifyStatus='submitSuccess'" />
    <VerifyStatusCard :verifyStatus="verifyStatus"
                      :faildReason="faildReason"
                      @verify="isVerify=true"
                      @back="getCompanies"
                      v-if="!isVerify && (verifyStatus === 'verifying'|| verifyStatus === 'faild' || verifyStatus==='submitSuccess')" />

    <VerifyInfoDialog :show="infoDialog" @close="infoDialog=false" @success="verifyInfoSuccess"/>
  </div>
</template>

<script>
import VerifyInfoDialog from './components/company-indent/VerifyInfoDialog'
import VerifyStatusCard from './components/company-indent/VerifyStatus'
import SubmitVerify from './components/company-indent/SubmitVerify'

import { getCompanies } from '../../boot/home/home'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'company-indent',
  components: {
    VerifyInfoDialog,
    VerifyStatusCard,
    SubmitVerify
  },
  data () {
    return {
      infoDialog: false,
      verifyStatus: '',
      verifyInfo: {},
      faildReason: '',
      isVerify: false
    }
  },
  computed: {
    ...mapGetters({
      'userInfo': 'userInfo',
      'userDetail': 'userDetail'
    })
  },
  created () {
    this.getCompanies()
  },
  methods: {
    // 打开验证身份信息的弹窗
    openVerifyDialog () {
      this.infoDialog = true
    },
    // 验证身份信息成功
    verifyInfoSuccess () {
      this.infoDialog = false
      this.isVerify = true
      this.verifyStatus = ''
    },
    // 获取公司认证信息
    async getCompanies () {
      if (this.userInfo.tenant_id === 0) {
        this.verifyStatus = 'once'
      } else {
        const res = await getCompanies()
        // 存在code 说明没查询到结果
        if (res.code === '1200') {
          this.verifyInfo = res.data
          // 暂不上线
          if (res.data.qualificationAuditStatus === 1) {
            this.verifyStatus = 'success'
          } else if (res.data.qualificationAuditStatus === 0) {
            //  审核中
            this.verifyStatus = 'verifying'
          } else if (res.data.qualificationAuditStatus === 2) {
            //  审核失败的原因
            this.faildReason = res.data.qualificationAuditRejectReason
            this.verifyStatus = 'faild'
          }
          const type = {
            '0': '审核中',
            '1': '已认证',
            '2': '认证失败'
          }
          // 设置公司信息和认证状态
          const data = { ...this.userDetail, status: type[res.data.qualificationAuditStatus] }
          this.set_userDetail(data)
        }
      }
    },
    ...mapMutations({
      'set_userDetail': 'SET_USERDETAIL' // 更改权限数组
    })
  }
}
</script>

<style scoped lang="scss">
.company-card {
  box-shadow: 0px 0px 6px 0px rgba(5, 0, 0, 0.1);
  border-radius: 4px;
  box-sizing: border-box;
  height: 130px;
  padding: 20px;
  width: 100%;
  .box-title {
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 16px;
  }
  .company-content {
    line-height: 30px;
    font-size: 14px;
    font-weight: 400;
  }
}
.company-card.bg {
  background-image: url("../../statics/img/veify-bg.png") !important;
  background-repeat: no-repeat!important;
  background-size: 100% 100% !important;
  cursor: pointer;
  .company-content {
    height: 60px;
    line-height: 60px;
    position: relative;
    span {
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
    }
  }
}
</style>
